<template>
	<view class="container box-bg">
		<navbar-back class="nav-back" fixed :title="name" background-color="#57E6CA"></navbar-back>
		<view class="box">
			<!-- 趋势曲线 -->
			<view class="graph-module radius10">
				<view class="box_title">趋势曲线</view>
				<view class="sub-title">
					<view class="graph-signal"></view>
					<view class="graph-text">{{name}}</view>
				</view>
				<canvas canvas-id="canvasMix" id="canvasMix" class="charts" disable-scroll=true @touchstart="touchMix" @touchmove="moveMix"
				 @touchend="touchEndMix"></canvas>
			</view>
			<!-- </view> -->
			<!-- 数据变化与事件记录用scroll-view 滚动 -->
			<!-- <scroll-view scroll-y="true"> -->
			<view class="line20"></view>
			<!-- 数据变化 -->
			<view class="box data-change-module radius10">
				<view class="box_title">数据变化</view>
				<view class="data-change-list">
					<data-change-list :top="max3" :list="changeDataList" showBtn @click="getMore"></data-change-list>
				</view>
			</view>
			
			<view class="line20"></view>
			<!-- 事件记录 -->
			<view class="box event-record-module radius10">
				<view class="box_title">事件记录</view>
				<view class="box_record">
					<!-- 告警记录列表 -->
					<!-- <view class="record-list"> -->
					<mark-slide-list :list="warningList" @click="clickMethod" @change="changeMethod"></mark-slide-list>
					<!-- </view> -->
				</view>
			</view>
		</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import navbarBack from '../../components/navbar-back/navbar-back.vue'
	import markSlideList from '../../components/mark-slide-list/mark-slide-list.vue'
	import dataChangeList from '../../components/data-change-list/data-change-list.vue'
	import uCharts from '../../components/u-charts/u-charts.js'
	var _self; // 引入变量 _self  <==>  this
	var canvaMix = null;

	export default {
		components: {
			navbarBack,
			markSlideList,
			dataChangeList
		},
		onLoad(option) {
			var dataList = JSON.parse(option.dataItem)
			this.name = dataList.name
			this.cWidth = uni.upx2px(654);
			this.cHeight = uni.upx2px(376);
			_self = this
			this.getServerData();
		},
		data() {
			return {
				backIcon: '../../static/image/monitor/icon-back.png',
				name: '温度1',
				warningList: [{
						id: 1,
						time: '2020-10-31 18:00:11',
						name: '温度1',
						desc: '超上限',
						percentage: '21℃',
						slide_x: 0,
						isConfirm: 0
					},
					{
						id: 2,
						time: '2020-10-31 18:00:11',
						name: '温度1',
						desc: '超上限',
						percentage: '21℃',
						slide_x: 0,
						isConfirm: 1
					},
					{
						id: 3,
						time: '2020-10-31 18:00:11',
						name: '温度1',
						desc: '超上限',
						percentage: '21℃',
						slide_x: 0,
						isConfirm: 0
					},
					{
						id: 4,
						time: '2020-10-31 18:00:11',
						name: '温度1',
						desc: '超上限',
						percentage: '21℃',
						slide_x: 0,
						isConfirm: 1
					},
				],
				changeDataList: [{
						id: 1,
						number: '21℃',
						status: 0,
						time: '2020-10-31 18:00:11'
					},
					{
						id: 2,
						number: '22℃',
						status: 0,
						time: '2020-10-31 18:00:11'
					},
					{
						id: 3,
						number: '23℃',
						status: 1,
						time: '2020-10-31 18:00:11'
					},
					{
						id: 4,
						number: '23℃',
						status: 1,
						time: '2020-10-31 18:00:11'
					}
				],
				max3: 3,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				chartData: {
					"categories": ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00",
						"08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00",
						"17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"
					],
					"series": [{
						"name": "曲面",
						"data": [-2, 5, 7, 13, 5, 16, 7, 12, 7, 6, 21, 22, 13, 8, 25, 2, 23, 10, 3, 6, 16, 9, 5, -2],
						"type": "area",
						"style": "curve",
						"color": "#facc14"
					}, {
						"name": "曲线",
						"data": [-2, 5, 7, 13, 5, 16, 7, 12, 7, 6, 21, 22, 13, 8, 25, 2, 23, 10, 3, 6, 16, 9, 5, -2],
						"type": "line",
						"style": "curve",
						"color": "#FCE04B",
					}, {
						"name": "点",
						"data": [-2, 5, 7, 13, 5, 16, 7, 12, 7, 6, 21, 22, 13, 8, 25, 2, 23, 10, 3, 6, 16, 9, 5, -2],
						"type": "point",
						"color": "#fddd35"
					}]
				}
			}
		},
		methods: {
			getServerData() {
				// uni.request({
				// 	url: 'https://www.ucharts.cn/data.json',
				// 	data: {},
				// 	success: function(res) {
				// 		console.log(res.data.data)
				// 		let Mix = {
				// 			categories: [],
				// 			series: []
				// 		};
				// 		//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// 		// Mix.categories = res.data.data.Mix.categories;
				// 		Mix.categories = this.chartData.categories;
				// 		Mix.series =this.chartData.Mix.series;
				// 		// Mix.series = res.data.data.Mix.series;
				// 		_self.showMix("canvasMix", Mix);
				// 	},
				// 	fail: () => {
				// 		_self.tips = "网络错误，小程序端请检查合法域名";
				// 	},
				// });
				let Mix = {
					categories: [],
					series: []
				};
				Mix.categories = this.chartData.categories;
				Mix.series = this.chartData.series;
				_self.showMix("canvasMix", Mix);
			},

			showMix(canvasId, chartData) {
				canvaMix = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'mix',
					fontSize: 11,
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridType: 'dash',
						itemCount: 6,
						scrollAlign: 'left',
						scrollShow: false,
					},
					yAxis: {

						gridType: 'solid',
						splitNumber: 5,
						min: -10,
						max: 40,
						gridColor: '#FFE1FF',
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: false,
					dataPointShape: true,
					extra: {
						tooltip: {
							showBox:false,//是否显示半透明黑色的提示区域
							bgColor: '#000000',
							bgOpacity: 0.7,
							gridType: 'dash',
							dashLength: 8,
							gridColor: '#1890ff',
							fontColor: '#FFFFFF',
							horizentalLine: true,
							xAxisLabel: true,
							yAxisLabel: true,
							labelBgColor: '#DFE8FF',
							labelBgOpacity: 0.95,
							labelAlign: 'left',
							labelFontColor: '#666666',
							// background: linear-gradient(180deg,#fffdf2 -11%, rgba(253,221,53,0));
							// #1890ff
						}
					},
				});
			},
			touchMix(e) {
				canvaMix.scrollStart(e);
			},
			moveMix(e) {
				canvaMix.scroll(e);
			},
			touchEndMix(e) {
				canvaMix.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaMix.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				})
			},

			getMore() {
				uni.navigateTo({
					url: "/pages/more-detail/more-detail"
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/base64/base64.scss';

	page {
		height: 100%;
	}

	.container {
		height: 100%;

		.height1197 {
			height: 640rpx;
		}

		&.box-bg {
			background: url($index-box_module_bg) center top no-repeat;
			background-size: 100% 340rpx;
			border-radius: 0;
			background-attachment: fixed;
			z-index: 99999;
			// background-position: 0 -100rpx;
		}

		.margin553 {
			margin-top: 640rpx;
		}

		.nav-back {
			position: fixed;
			z-index: 99991999;
		}

		.fixed {
			position: fixed;
			// margin-bottom: calc(var(--status-bar-height) + 92rpx);
		}
		.line20 {
			height: 20rpx;
			width: 100%;
			background-color: #F5F6F9;
		}
		
		.height332 {
			height: 332rpx;
		}

		.radius10 {
			border-radius: 10rpx;
		}

		.box_title {
			height: 92rpx;
			line-height: 92rpx;
			color: #333;
			font-size: 36rpx;
		}

		.box {
			padding: 24rpx 24rpx;
			overflow: hidden;

			.graph-module {
				height: 527rpx;
				padding: 0 24rpx;
				background-color: #fff;
				// z-index: 999;
				margin-top: calc(var(--status-bar-height) + 68rpx);

				// 图表
				.sub-title {
					height: 33rpx;
					line-height: 33rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.graph-signal {
						width: 28rpx;
						height: 9rpx;
						background: #fddd35;
						border-radius: 5rpx;
						margin-right: 8rpx;
					}

					.graph-text {
						color: #333333;
						font-size: 24rpx;
					}

				}

				.charts {
					width: 654rpx;
					height: 376rpx;
					margin-top: 10rpx;
					z-index: 99;
					// padding: 0 24rpx 24rpx 24rpx;
					// background-color: #F0AD4E;
				}
			}

			.data-change-module {
				height: 444rpx;
				background-color: #fff;
			}

			.event-record-module {
				display: flex;
				flex-direction: column;
				background-color: #fff;
				// margin-top: 20rpx;
				margin-bottom: 24rpx;

				.box_title {
					height: 92rpx;
					line-height: 92rpx;
					color: #333;
					font-size: 36rpx;
				}
			}

			.record-list {
				// overflow: hidden;
			}
		}
	}
</style>
